<template>
  <div class="topic-detail">
    <el-card class="box-card">
      <div class="top">
        <el-tag
          size="mini"
          effect="plain"
          v-if="row.classifyId"
          style="margin-bottom: 10px"
        >
          {{ row.sysClassify.name }}
        </el-tag>
        <h2>
          {{ row.title }}
          <el-tag
            class="tag"
            size="mini"
            effect="dark"
            type="danger"
            v-if="row.orderBy != 0"
            >置顶</el-tag
          >
          <el-tag
            class="tag"
            size="mini"
            effect="dark"
            type="warning"
            v-if="row.selection != 0"
            >精选</el-tag
          >
        </h2>

        <div class="topic-info">
          <span>发表时间：{{ row.createTime }}</span>
          <span class="el-icon-view"> {{ row.clickCount }} 次浏览 </span>
          <span class="el-icon-chat-dot-square">
            {{ commentCount }} 次评论
          </span>
        </div>
      </div>
      <div class="content">
        <div v-html="row.contents"></div>
      </div>
      <div class="btns">
        <el-tooltip
          :content="row.isCollect && row.isCollect == 'Y' ? '取消收藏' : '收藏'"
          placement="top"
          effect="light"
        >
          <el-button
            type="primary"
            size="mini"
            :plain="row.isCollect && row.isCollect != 'Y'"
            icon="el-icon-star-off"
            v-preventReClick
            :disabled="row.sysUser.id == userId || !topicStatus"
            @click="handleCollect(row, 'collect')"
          >
            {{ row.collectCount }}
          </el-button>
        </el-tooltip>
        <el-tooltip
          :content="row.isLike && row.isLike == 'Y' ? '取消点赞' : '点赞'"
          placement="top"
          effect="light"
        >
          <el-button
            type="primary"
            size="mini"
            :plain="row.isLike && row.isLike != 'Y'"
            icon="el-icon-thumb"
            v-preventReClick
            :disabled="row.sysUser.id == userId || !topicStatus"
            @click="handleCollect(row, 'like')"
          >
            {{ row.likeCount }}
          </el-button>
        </el-tooltip>
      </div>
    </el-card>
  </div>
</template>
<script>
import userInfo from '@/mixins/userInfo'
export default {
  mixins: [userInfo],
  data() {
    return {
      commentCount: 0,
    }
  },
  props: ['row', 'topicStatus'],
  mounted() {
    this.$bus.$on('sendCommentCount', (val) => (this.commentCount = val))
  },
  beforeDestroy() {
    this.$bus.$off('sendCommentCount')
  },
  methods: {
    async handleCollect(row, opt) {
      let obj = {
        topicId: row.id,
        opt,
        ctype: 1,
      }
      if (
        (opt == 'collect' && row.isCollect == 'Y') ||
        (opt == 'like' && row.isLike == 'Y')
      ) {
        await this.$store.dispatch('cancelBbsCollect', obj)
      } else {
        await this.$store.dispatch('addBbsCollect', obj)
      }
      this.$bus.$emit('queryTopicById')
    },
  },
}
</script>
<style scoped lang="scss">
.topic-detail {
  .top {
    border-bottom: 1px solid #eee;
    h2 {
      color: #1d2129;
      font-size: 24px;
      line-height: 34px;
      font-weight: normal;
      .tag {
        margin-left: 10px;
      }
    }
    .topic-info {
      line-height: 32px;
      span {
        margin-right: 10px;
        color: #999;
      }
    }
  }
  .content {
    padding: 20px 0;
    min-height: 300px;
    ::v-deep span,
    ::v-deep p {
      // color: #272e3b;
      // font-size: 16px;
      line-height: 1.75;
      word-wrap: break-word;
      margin-bottom: 1em;
      text-indent: 2em;
      background: #fff;
    }
    ::v-deep img {
      max-width: 800px !important;
      border-radius: 8px;
    }
  }
  .btns {
    text-align: center;
  }
}
</style>